<template>
	<view class="wrap">
    <u-toast ref="uToast" />
    <u-form :model="formData">
    	<u-form-item label="房主姓名" prop="house_owner_name" label-width="120">
    		<u-input :border="border" placeholder="请输入房主姓名" v-model="formData.house_owner_name" />
    	</u-form-item>
      <u-form-item label="房主电话" prop="house_owner_mobile" label-width="120">
      	<u-input :border="border" placeholder="请输入房主电话" v-model="formData.house_owner_mobile" />
      </u-form-item>
      <u-form-item label="房屋位置" prop="house_address" label-width="120">
      	<u-input :border="border" placeholder="请输入房屋位置" v-model="formData.house_address" />
      </u-form-item>
      <u-form-item label="房型" prop="house_layout" label-width="120">
      	<view class="u-flex u-col-center u-row-between re" @click="changeIdx(4)">
      	  <u-input :border="border" placeholder="请选择房型" disabled v-model="house_layout" />
      	  <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
      	</view>
      </u-form-item>
      <u-form-item label="面积" prop="house_area" label-width="120">
      	<u-input :border="border" placeholder="请输入面积" v-model="formData.house_area" />
      </u-form-item>
      <u-form-item label="楼层" prop="house_floor_num re" label-width="120">
      	<view class="u-flex u-col-center u-row-between" @click="changeIdx(1)">
          <u-input :border="border" placeholder="请输入楼层" v-model="formData.house_floor_num" />
        </view>
      </u-form-item>
      <u-form-item label="楼层类型" prop="house_floor_type re" label-width="120">
      	<view class="u-flex u-col-center u-row-between" @click="changeIdx(1)">
          <u-input :border="border" placeholder="请选择楼层" disabled v-model="house_floor_type" />
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
        </view>
      </u-form-item>
      <u-form-item label="朝向" prop="house_toward re" label-width="120">
      	<view class="u-flex u-col-center u-row-between" @click="changeIdx(6)">
          <u-input :border="border" placeholder="请选择朝向" disabled v-model="house_toward" />
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
        </view>
      </u-form-item>
      <u-form-item label="装修" prop="house_decoration re" label-width="120">
      	<view class="u-flex u-col-center u-row-between" @click="changeIdx(5)">
          <u-input :border="border" placeholder="请选择装修" disabled v-model="house_decoration" />
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
        </view>
      </u-form-item>
         
      <u-form-item label="付款方式" prop="payment_method_type" label-width="120">
      	<view class="u-flex u-col-center u-row-between re" @click="changeIdx(2)">
      	  <u-input :border="border" placeholder="请选择付款方式" disabled v-model="payment_method_type" />
      	  <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
      	</view>
      </u-form-item>
      <u-form-item label="租金" prop="house_rent" label-width="120">
      	<u-input :border="border" placeholder="请输入租金" v-model="formData.house_rent" />
      </u-form-item>
      <u-form-item label="押金" prop="house_deposit" label-width="120">
      	<u-input :border="border" placeholder="请输入押金" v-model="formData.house_deposit" />
      </u-form-item>
      <u-form-item label="房源标题" prop="house_title" label-width="120">
      	<u-input :border="border" placeholder="请输入房源标题" v-model="formData.house_title" />
      </u-form-item>
      <u-form-item label="房源简介" prop="house_content" label-width="120" class="abc">
      	<textarea cols="30" rows="10" v-model="formData.house_content" class="textarea" placeholder="房源简介"></textarea>
      </u-form-item>
      <u-form-item label="房源园区" prop="community_name re" label-width="120">
      	<u-input :border="border" placeholder="请输入房源园区" v-model="formData.community_name" />
      </u-form-item>
      
      <u-form-item label="房源配置" prop="house_config" label-width="120">
      	<view class="u-flex u-col-center u-row-between re" @click="changeIdx(3)">
      	  <u-input v-show="configList.length === 0" :border="border" placeholder="请选择" disabled v-model="formData.house_config" />
          <view class="">
            <text v-for="(item, index) in configList" :key="item.id" v-show="item.on">
              {{item.name}}
              <template v-if="index < configList.length-1">、</template>
            </text>
          </view>
      	  <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          <view class="bg"></view>
      	</view>
      </u-form-item>
      <u-form-item label="图集" prop="house_img_list" label-width="120">
            <u-upload
            	width="150"
            	height="150"
            	ref="uUpload"
              :fileList = "images"
            	@on-uploaded="onUploaded"
            	@on-remove="onRemove"
            	:action="uploadurl"
            	:header="header"
            	:form-data="formdata"
            ></u-upload>
      </u-form-item>
      <u-button type="primary" hover-class="none" shape="circle" @click="submit">确认提交</u-button>
    </u-form>
    <!-- 1-楼层, 2-付款方式, 3-房源配置 4-房型 5-装修 6-朝向   -->
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <div class="pup">
        <view class="title">
          <template v-if="type == 1">请选择楼层类型</template>
          <template v-if="type == 2">请选择付款方式</template>
          <template v-if="type == 3">请选择房源配置</template>
          <template v-if="type == 4">请选择房型</template>
        </view>
        <view v-if="type == 1" class="list list3">
          <view v-for="item in config.floorTypeSelectList" :key="item.id" :class="{on: item.id === formData.house_floor_type}" class="item" @click="getItem(item)">{{item.name}}</view>
        </view>
        <view v-if="type == 2" class="list list2">
          <view v-for="item in config.paymentConfig" :key="item.id" :class="{on: item.id === formData.payment_method_type}" class="item" @click="getItem(item)">{{item.name}}</view>
        </view>
        <view v-if="type == 3">
          <view class="list list3">
            <view v-for="(item, index) in configList" :class="{on: item.on}" :key="item.id" @click="getItem(item, index)" class="item">{{item.name}}</view>
          </view>
          
          <u-button type="primary" hover-class="none" shape="circle" @click="goLogin">提交</u-button>
        </view>
        
        <view v-if="type == 4" class="list list2">
          <view v-for="item in config.tenancyHouseTypeConfig" :key="item.id" :class="{on: item.id === formData.house_layout}" class="item" @click="getItem(item)">{{item.name}}</view>
        </view>
        <view v-if="type == 5">
          <view class="list list3">
            <view v-for="(item, index) in config.decorationSelectList" :class="{on: item.on}" :key="item.id" @click="getItem(item, index)" class="item">{{item.name}}</view>
          </view>
          
          <u-button type="primary" hover-class="none" shape="circle" @click="goLogin">提交</u-button>
        </view>
        <view v-if="type == 6">
          <view class="list list3">
            <view v-for="(item, index) in config.towardSelectList" :class="{on: item.on}" :key="item.id" @click="getItem(item, index)" class="item">{{item.name}}</view>
          </view>
          
          <u-button type="primary" hover-class="none" shape="circle" @click="goLogin" style="margin-top: 60rpx;">提交</u-button>
        </view>
        
      </div>
    </u-popup>
	</view>
</template>
<style lang="scss" scoped>
  .wrap{
    background-color: #fff !important; padding: 0 30rpx 80rpx; position: relative; z-index: 1;
  }
  /deep/.abc .u-form-item__body{align-items: self-start !important;}
  .textarea{border: 1px solid #ededed; padding: 20rpx; box-sizing: border-box; display: block; width: 100%;}
  .re{position: relative;}
  .bg{position: absolute; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0;}
  .pup{
    background-color: #fff; padding: 30rpx; padding-bottom: 80rpx;
    .title{padding-bottom: 20rpx; border-bottom: 1px solid #ccc; margin-bottom: 30rpx; font-weight: bold;}
    .list{
      display: flex; flex-wrap: wrap;
      .item{
        border-radius:4px; border: 1px solid #ededed; display: flex; align-items: center; justify-content: center; height:80rpx;  margin: 0 2% 16rpx 0; box-sizing: border-box;
        &.on{background-color: #2979ff; color: #fff; border-color: #2979ff;}
      }
      &.list2{
        .item{
          width: 49%;
          &:nth-child(2n+2){margin-right: 0 !important;}
        }
      }
      &.list3{
        .item{
          width: 32%;
          &:nth-child(3n+3){margin-right: 0 !important;}
        }
      }
    }
  }
</style>
<script>
	export default {
		data() {
			return {
        show:false,
        formData:{
          house_owner_name:'', // 房主姓名
          house_owner_mobile:'', // 房主电话
          house_address:'', // 地址
          house_layout:'', // 房型
          house_area:'', // 面积
          house_floor_type:'', // 楼层
          house_floor_num:'', // 楼层类型
          payment_method_type:'', // 支付方式
          house_rent:'', // 租金
          house_deposit:'', // 押金
          house_title:'', // 房源简介
          house_config:'', // 房源配置
          house_img_list:'', // 房屋图片
          house_decoration:'', // 装修
          house_toward:'', // 朝向
          house_content:'', // 描述
          community_name:'', // 小区
        },
        formData1:{
          house_owner_name:'张小北', // 房主姓名
          house_owner_mobile:'18255199668', // 房主电话
          house_address:'安徽省合肥市瑶海区', // 地址
          house_layout:1, // 房型
          house_area:'123', // 面积
          house_floor_type:1, // 楼层
          house_floor_num:'3', // 楼层类型
          payment_method_type:1, // 支付方式
          house_rent:'123', // 租金
          house_deposit:'123', // 押金
          house_title:'新华小区', // 房源简介
          house_config:'1,2,3,4,5', // 房源配置
          house_img_list:'', // 房屋图片
          house_decoration:'1', // 装修
          house_toward:'1', // 朝向
          house_content:'', // 描述
          community_name:'', // 小区
        },
        config:null,
        rules: {
        	house_owner_name: [{ required: true, message: '请输入房主姓名', trigger: ['blur'] }],
        	house_owner_mobile: [{ required: true, message: '请输入房主电话', trigger: ['blur'] }],
          house_address: [{ required: true, message: '请输入地址', trigger: ['blur'] }],
          house_layout: [{ required: true, message: '请选择房型', trigger: ['blur'] }],
          house_num: [{ required: true, message: '请选择房型', trigger: ['blur'] }],
          house_area: [{ required: true, message: '请输入面积', trigger: ['blur'] }],
          house_floor_type: [{ required: true, message: '请选择楼层类型', trigger: ['blur'] }],
          payment_method_type: [{ required: true, message: '请选择付款方式', trigger: ['blur'] }],
          house_rent: [{ required: true, message: '请输入租金', trigger: ['blur'] }],
          house_deposit: [{ required: true, message: '请输入押金', trigger: ['blur'] }],
          house_title: [{ required: true, message: '请输入房源简介', trigger: ['blur'] }],
          house_config: [{ required: true, message: '请选择房源配置', trigger: ['blur'] }],
          house_img_list: [{ required: true, message: '请上传房屋图片', trigger: ['blur'] }],
        },
        house_layout:'', // 房屋类型
        house_floor_type:'', // 楼层类型
        payment_method_type:'', // 付款方式
        house_decoration:'',
        house_toward:'',
        configList : [],
        images:[],
        type:0,
        house_sn:'',
        http:'',
        border:''
			}
		},
    onReady(){
      
    },
    onLoad(e) {
      this.http = this.$api.httpUrlApi();
      if(e.id){
        this.house_sn = e.id;
      }
      console.log('e', e.id)
      this.getCon(e.id)
    },
    computed: {
    	header() {
    		return {
    			token: this.vuex_token || '',
    		};
    	},
    	formdata() {
    		let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
    		let isObj = this.$u.test.object(multipart);
    		if (isObj) {
    			return this.vuex_config.config.upload.multipart;
    		}
    		return {};
    	},
    	uploadurl() {
    		if (!this.vuex_config.upload) {
    			return '';
    		}
    		return this.vuex_config.upload.uploadurl;
    	}
    },
		methods: {
      onUploaded(e, name) {
      	console.log(e, name);
      	// this.images = e
      	// 	.map(item => {
      	// 		return item.response ? item.response.data.url : item.url.replace(this.http,'');
      	// 	})
      		// .join(',');
          console.log('images--->',this.images)
          this.formData.house_img_list = e.map(item => {
            return item.response && item.response.code === 1 && item.response.data.url ? item.response.data.url : item.url.replace(this.http,'');
          })
          console.log('this.formData.house_img_list------------>',this.formData.house_img_list)
      },
      onRemove(index, lists, name) {
      	this.images = lists
      		.map(item => {
      			return item.response.data.url;
      		})
      		.join(',');
      },
      errorToast(msg){
        this.$refs.uToast.show({
          title: msg,
          type:"error"
        })
      },
      // 提交表单
      submit(){
        console.log('submit-->', this.formData)
        const data = {...this.formData}
        if(!data.house_owner_name) return this.errorToast('房主姓名不能为空！'); 
        if(!data.house_owner_mobile) return this.errorToast('房主电话不能为空！'); 
        if(!data.house_address) return this.errorToast('地址不能为空！'); 
        if(!data.house_layout) return this.errorToast('房型不能为空！'); 
        if(!data.house_area) return this.errorToast('面积不能为空！'); 
        if(!data.house_floor_type) return this.errorToast('楼层不能为空！'); 
        if(!data.house_floor_num) return this.errorToast('楼层类型不能为空！'); 
        if(!data.payment_method_type) return this.errorToast('支付方式不能为空！'); 
        if(!data.house_rent) return this.errorToast('租金不能为空！'); 
        if(!data.house_deposit) return this.errorToast('押金不能为空！'); 
        if(!data.house_title) return this.errorToast('房源简介不能为空！'); 
        if(!data.house_config) return this.errorToast(' 房源配置不能为空！'); 
        if(!data.house_img_list) return this.errorToast('房屋图片不能为空！'); 
        if(!data.house_decoration) return this.errorToast('房源装修不能为空！'); 
        if(!data.house_toward) return this.errorToast('房源朝向不能为空！'); 
        if(!data.house_content) return this.errorToast('描述不能为空！'); 
        if(!data.community_name) return this.errorToast('房源园区不能为空！'); 
        
        if(this.house_sn){
          this.$api.editHousingResourcesApi({...this.formData, house_sn: this.house_sn}).then(res=>{
            if(res.code === 1){
              uni.showToast({
                title:"房源修改成功"
              })
              uni.navigateBack()
            }else{
              this.errorToast(res.msg);
              
            }
            
          })
        }else{
          this.$api.addHousingResourcesApi(this.formData).then(res=>{
            if(res.code === 1){
              uni.showToast({
                title:"房源添加成功"
              })
              uni.navigateBack()
            }else{
              this.errorToast(res.msg);
            }
            
          })
        }
        
      },
      checkboxChange(e){
        console.log('checkboxChange', e)
      },
      goLogin(){
        let configList = JSON.parse(JSON.stringify(this.configList)).filter(m=> m.on)
        this.formData.house_config = configList.map(m=>{return m.id})
        this.show = false;
      },
      // 1-楼层, 2-付款方式, 3-房源配置 4-房型  5-装修 6-朝向
      getItem(e, i){
        if(this.type === 1){
          this.house_floor_type = e.name;
          this.formData.house_floor_type = e.id;
          this.show = false;
        }else if(this.type === 2){
          this.payment_method_type = e.name;
          this.formData.payment_method_type = e.id;
          this.show = false;
        }else if(this.type === 3){
          let configList = JSON.parse(JSON.stringify(this.configList))
          configList[i].on = !this.configList[i].on;
          this.configList = configList;
        }else if(this.type === 4){
          this.house_layout = e.name;
          this.formData.house_layout = e.id;
          this.show = false;
        }else if(this.type === 5){
          this.house_decoration = e.name;
          this.formData.house_decoration = e.id;
          this.show = false;
        }else if(this.type === 6){
          this.house_toward = e.name;
          this.formData.house_toward = e.id;
          this.show = false;
        }
         
      },
      // 1-楼层, 2-付款方式, 3-房源配置 4-房型
      changeIdx(e){
        this.type = e;
        this.show = true
      },
      getCon(id){
        this.$api.getHouseConfigApi().then(res2=>{
          const res1 = res2.data;
          this.config = res1;
          
          console.log('res1------------', res1)
          if(res2.code == 1 && id){
            console.log('res--------------', res1, this.configList)
            this.$api.housingResourcesDetailApi({house_sn: id}).then(res=>{
              if(res.code === 1){
                res = res.data;
                this.formData = {
                  house_owner_name:res.house_owner_name || '', // 房主姓名
                  house_owner_mobile:res.house_owner_mobile || '', // 房主电话
                  house_address:res.house_address || '', // 地址
                  house_layout:res.house_layout || '', // 房型
                  house_area:res.house_area || '', // 面积
                  house_floor_type:res.house_floor_type || '', // 楼层
                  house_floor_num:res.house_floor_num || '', // 楼层类型
                  payment_method_type:res.payment_method_type || '', // 支付方式
                  house_rent:res.house_rent || '', // 租金
                  house_deposit:res.house_deposit || '', // 押金
                  house_title:res.house_title || '', // 房源简介
                  house_config:res.house_config || [], // 房源配置
                  house_img_list:res.images || [], // 房屋图片
                  house_decoration:res.house_decoration || '', // 装修
                  house_toward:res.house_toward || '', // 朝向
                  house_content:res.house_content || '', // 描述
                  community_name:res.community_name || '', // 小区
                };
                const house_layout = res1.tenancyHouseTypeConfig.find(n=> n.id == this.formData.house_layout)
                const house_floor_type = res1.floorTypeSelectList.find(n=> n.id == this.formData.house_floor_type)
                const payment_method_type = res1.paymentConfig.find(n=> n.id == this.formData.payment_method_type)
                const house_decoration = res1.decorationSelectList.find(n=> n.id == this.formData.house_decoration)
                const house_toward = res1.towardSelectList.find(n=> n.id == this.formData.house_toward)
                
                this.house_layout = house_layout ? house_layout.name : ''; // 房屋类型
                this.house_floor_type = house_floor_type ? house_floor_type.name : ''; // 楼层类型
                this.payment_method_type = payment_method_type ? payment_method_type.name : ''; // 付款方式
                this.house_decoration = house_decoration ? house_decoration.name : '';
                this.house_toward = house_toward ? house_toward.name : '';
                this.images = res.images.map(m=>{
                  return {url: this.http+m.image}
                });
                console.log('this.images--->',this.images)
                this.configList = res1.tenancyRoomFacilitiesConfig.map(m=>{
                  this.formData.house_config = this.formData.house_config.concat(m.config_id)
                  if(res.config_list.find(n=> n.id == m.config_id)){
                    m.on = false
                  }else{
                    m.on = true;
                  }
                  return m
                })
              }
            })
          }else{
            this.configList = res1.tenancyRoomFacilitiesConfig
          }
          
        })
      },
		}
	}
</script>